<script setup lang="ts">
import { ref, onMounted, computed } from "vue";
import { invoke } from "@tauri-apps/api/core";
import { debug, error as logError } from "@tauri-apps/plugin-log";

// 类型定义
interface AlertEvent {
    id: number;
    title: string;
    content: string;
    status: string;
    statusText: string;
    start_time: string;
    end_time: string;
    type_id?: number;
    topic: string;
}

interface Event {
    id: number;
    title: string;
    content: string;
    type_id: number;
    status: number;
    end_time: string;
    start_time: string;
}

// 响应式数据
const alertData = ref<AlertEvent[]>([]);
const loading = ref(false);
const currentDate = ref(new Date());
const showEditModal = ref(false);
const editingEvent = ref<AlertEvent | null>(null);
const hoveredEvent = ref<AlertEvent | null>(null);
const tooltipPosition = ref({ x: 0, y: 0 });

// 类型映射
const typeMapping = {
    0: "其他",
    1: "材料",
    2: "订单",
    3: "个人事情",
};

const statusMapping = {
    0: { text: "未完成", value: "0" },
    1: { text: "已完成", value: "1" },
    2: { text: "已取消", value: "2" },
    3: { text: "过期", value: "3" },
};

// 计算属性
const currentDateString = computed(() => {
    return formatDate(currentDate.value);
});

const displayDateString = computed(() => {
    const today = new Date();
    const yesterday = new Date(today);
    yesterday.setDate(yesterday.getDate() - 1);
    const tomorrow = new Date(today);
    tomorrow.setDate(tomorrow.getDate() + 1);

    if (formatDate(currentDate.value) === formatDate(today)) {
        return "今天";
    } else if (formatDate(currentDate.value) === formatDate(yesterday)) {
        return "昨天";
    } else if (formatDate(currentDate.value) === formatDate(tomorrow)) {
        return "明天";
    } else {
        return formatDate(currentDate.value);
    }
});

const pendingEvents = computed(() =>
    alertData.value.filter(
        (event) => event.status === "0" || event.status === "3",
    ),
);

const completedEvents = computed(() =>
    alertData.value.filter(
        (event) => event.status === "1" || event.status === "2",
    ),
);

// 日期格式化函数
function formatDate(date: Date): string {
    const year = date.getFullYear();
    const month = (date.getMonth() + 1).toString().padStart(2, "0");
    const day = date.getDate().toString().padStart(2, "0");
    return `${year}-${month}-${day}`;
}

function formatDateTime(dateTimeStr: string): string {
    if (!dateTimeStr) return "";

    try {
        let date: Date;

        if (dateTimeStr.includes("T")) {
            date = new Date(dateTimeStr);
        } else if (dateTimeStr.includes(" ")) {
            date = new Date(dateTimeStr.replace(" ", "T"));
        } else {
            return dateTimeStr;
        }

        if (isNaN(date.getTime())) {
            console.warn("Invalid date:", dateTimeStr);
            return "";
        }

        const year = date.getFullYear();
        const month = (date.getMonth() + 1).toString().padStart(2, "0");
        const day = date.getDate().toString().padStart(2, "0");
        const hours = date.getHours().toString().padStart(2, "0");
        const minutes = date.getMinutes().toString().padStart(2, "0");

        return `${year}-${month}-${day} ${hours}:${minutes}`;
    } catch (e) {
        console.error("Error parsing date:", e, dateTimeStr);
        return "";
    }
}

// 获取事件背景颜色类名
function getEventBackgroundClass(event: AlertEvent): string {
    let baseClass = "";
    switch (event.status) {
        case "0": // 未完成
            baseClass = "bg-blue-50 border-blue-200";
            break;
        case "1": // 已完成
            baseClass = "bg-green-50 border-green-200";
            break;
        case "2": // 已取消
            baseClass = "bg-yellow-50 border-yellow-200";
            break;
        case "3": // 过期
            baseClass = "bg-red-50 border-red-200";
            break;
        default:
            baseClass = "bg-gray-50 border-gray-200";
    }

    return baseClass;
}

// 获取事件类型颜色类名
function getEventTypeClass(typeId: number): string {
    switch (typeId) {
        case 1: // 材料
            return "text-blue-600 bg-blue-100";
        case 2: // 订单
            return "text-green-600 bg-green-100";
        case 3: // 个人事情
            return "text-purple-600 bg-purple-100";
        default: // 其他
            return "text-gray-600 bg-gray-100";
    }
}

// 转换后端事件为前端警报事件
function convertToAlertEvent(event: Event): AlertEvent {
    return {
        id: event.id,
        title: event.title,
        topic: typeMapping[event.type_id as keyof typeof typeMapping] || "其他",
        content: event.content,
        status:
            statusMapping[event.status as keyof typeof statusMapping]?.value ||
            "0",
        statusText:
            statusMapping[event.status as keyof typeof statusMapping]?.text ||
            "未完成",
        start_time: formatDateTime(event.start_time),
        end_time: formatDateTime(event.end_time),
        type_id: event.type_id,
    };
}

// 鼠标悬停处理
function handleMouseEnter(event: MouseEvent, alert: AlertEvent) {
    hoveredEvent.value = alert;
    tooltipPosition.value = {
        x: event.clientX + 10,
        y: event.clientY + 10,
    };
}

function handleMouseMove(event: MouseEvent) {
    if (hoveredEvent.value) {
        tooltipPosition.value = {
            x: event.clientX + 10,
            y: event.clientY + 10,
        };
    }
}

function handleMouseLeave() {
    hoveredEvent.value = null;
}

// 日期导航函数
function goToYesterday() {
    const newDate = new Date(currentDate.value);
    newDate.setDate(newDate.getDate() - 1);
    currentDate.value = newDate;
    loadEvents();
}

function goToToday() {
    currentDate.value = new Date();
    loadEvents();
}

function goToTomorrow() {
    const newDate = new Date(currentDate.value);
    newDate.setDate(newDate.getDate() + 1);
    currentDate.value = newDate;
    loadEvents();
}

// 加载事件数据 - 修复日期查询bug
async function loadEvents() {
    loading.value = true;
    try {
        const startDate = new Date(currentDate.value);
        startDate.setHours(0, 0, 0, 0);

        const endDate = new Date(currentDate.value);
        endDate.setHours(23, 59, 59, 999);

        const start_time = startDate.toISOString();
        const end_time = endDate.toISOString();

        console.log("Loading events for date:", {
            date: currentDateString.value,
            start_time,
            end_time,
        });

        const result: any = await invoke("list_event", {
            start_time,
            end_time,
        });

        if (result && result.data) {
            alertData.value = result.data.map((event: Event) =>
                convertToAlertEvent(event),
            );
            debug(
                `Loaded ${alertData.value.length} events for ${currentDateString.value}`,
            );
        } else {
            alertData.value = [];
            console.log("No events data received");
        }
    } catch (error) {
        logError(`Error loading events: ${error}`);
        alertData.value = [];
    } finally {
        loading.value = false;
    }
}

// 更新事件状态
async function updateEventStatus(eventId: number, newStatus: number) {
    try {
        const eventToUpdate = alertData.value.find(
            (event) => event.id === eventId,
        );
        if (!eventToUpdate) {
            console.error("Event not found:", eventId);
            return;
        }

        debug(`Updating event status: ${eventId} to ${newStatus}`);

        const result = await invoke("update_event", {
            id: eventId,
            title: eventToUpdate.title,
            content: eventToUpdate.content,
            type_id: eventToUpdate.type_id || 0,
            status: newStatus,
            end_time: eventToUpdate.end_time,
            start_time: eventToUpdate.start_time,
        });

        console.log("Event status updated:", result);

        await loadEvents();
    } catch (error) {
        logError(`Failed to update event status: ${error}`);
        alert("更新事件状态失败，请重试");
    }
}

// 事件操作函数
function completeEvent(eventId: number) {
    updateEventStatus(eventId, 1);
}

function cancelEvent(eventId: number) {
    updateEventStatus(eventId, 2);
}

function restoreEvent(eventId: number) {
    updateEventStatus(eventId, 0);
}

// 撤销完成事件
function undoCompleteEvent(eventId: number) {
    updateEventStatus(eventId, 0);
}

// 编辑事件
function editEvent(event: AlertEvent) {
    editingEvent.value = { ...event };
    showEditModal.value = true;
}

// 保存编辑
async function saveEvent() {
    if (!editingEvent.value) return;

    try {
        const result = await invoke("update_event", {
            id: editingEvent.value.id,
            title: editingEvent.value.title,
            content: editingEvent.value.content,
            type_id: editingEvent.value.type_id || 0,
            status: parseInt(editingEvent.value.status),
            end_time: editingEvent.value.end_time,
            start_time: editingEvent.value.start_time,
        });

        console.log("Event updated:", result);
        await loadEvents();
        showEditModal.value = false;
        editingEvent.value = null;
    } catch (error) {
        logError(`Failed to update event: ${error}`);
        alert("更新事件失败，请重试");
    }
}

// 关闭模态框
function closeModal() {
    showEditModal.value = false;
    editingEvent.value = null;
}

onMounted(() => {
    loadEvents();
});
</script>

<template>
    <main class="container mx-auto">
        <div class="p-6">
            <!-- 日期导航和标题 -->
            <div
                class="flex flex-col md:flex-row justify-between items-center mb-6"
            >
                <h1 class="text-2xl font-bold text-gray-800 mb-4 md:mb-0">
                    事件管理
                </h1>

                <div class="flex items-center space-x-4">
                    <!-- 日期导航 -->
                    <div
                        class="flex items-center space-x-2 bg-white rounded-lg shadow-sm p-2"
                    >
                        <button
                            @click="goToYesterday"
                            class="btn btn-sm btn-outline"
                            title="昨天"
                        >
                            <svg
                                class="w-4 h-4"
                                fill="none"
                                stroke="currentColor"
                                viewBox="0 0 24 24"
                            >
                                <path
                                    stroke-linecap="round"
                                    stroke-linejoin="round"
                                    stroke-width="2"
                                    d="M15 19l-7-7 7-7"
                                />
                            </svg>
                        </button>

                        <button
                            @click="goToToday"
                            class="btn btn-sm btn-primary"
                            :class="{
                                'btn-outline':
                                    formatDate(currentDate) !==
                                    formatDate(new Date()),
                            }"
                        >
                            {{ displayDateString }}
                        </button>

                        <button
                            @click="goToTomorrow"
                            class="btn btn-sm btn-outline"
                            title="明天"
                        >
                            <svg
                                class="w-4 h-4"
                                fill="none"
                                stroke="currentColor"
                                viewBox="0 0 24 24"
                            >
                                <path
                                    stroke-linecap="round"
                                    stroke-linejoin="round"
                                    stroke-width="2"
                                    d="M9 5l7 7-7 7"
                                />
                            </svg>
                        </button>
                    </div>
                </div>
            </div>

            <!-- 加载状态 -->
            <div v-if="loading" class="flex justify-center items-center py-12">
                <div
                    class="loading loading-spinner loading-lg text-primary"
                ></div>
                <span class="ml-4 text-gray-600">加载中...</span>
            </div>

            <!-- 事件内容 -->
            <div v-else class="space-y-8">
                <!-- 待处理事件 -->
                <div v-if="pendingEvents.length > 0">
                    <h2
                        class="text-xl font-semibold text-gray-700 mb-4 pb-2 border-b"
                    >
                        待处理事件
                    </h2>
                    <div
                        class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4"
                    >
                        <div
                            v-for="alert in pendingEvents"
                            :key="alert.id"
                            class="card rounded-lg border transition-all duration-200 hover:shadow-md flex flex-col"
                            :class="getEventBackgroundClass(alert)"
                        >
                            <div class="card-body p-4 flex flex-col flex-1">
                                <!-- 标题和状态 -->
                                <div
                                    class="flex justify-between items-start mb-2"
                                >
                                    <h3
                                        class="card-title text-base font-medium text-gray-900 line-clamp-2 flex-1 mr-2"
                                    >
                                        {{ alert.title }}
                                    </h3>
                                    <span
                                        class="badge badge-sm shrink-0"
                                        :class="{
                                            'badge-info': alert.status === '0',
                                            'badge-error': alert.status === '3',
                                        }"
                                    >
                                        {{ alert.statusText }}
                                    </span>
                                </div>

                                <!-- 类型和时间 -->
                                <div class="space-y-2 mb-3">
                                    <div
                                        class="flex items-center justify-between text-sm"
                                    >
                                        <span
                                            class="badge badge-outline badge-sm"
                                            :class="
                                                getEventTypeClass(
                                                    alert.type_id || 0,
                                                )
                                            "
                                        >
                                            {{ alert.topic }}
                                        </span>
                                    </div>
                                    <div class="text-xs text-gray-500">
                                        {{ alert.start_time }} -
                                        {{ alert.end_time }}
                                    </div>
                                </div>

                                <!-- 内容 - 添加悬停效果 -->
                                <div
                                    class="relative flex-1"
                                    @mouseenter="
                                        handleMouseEnter($event, alert)
                                    "
                                    @mousemove="handleMouseMove"
                                    @mouseleave="handleMouseLeave"
                                >
                                    <p
                                        class="text-sm text-gray-600 line-clamp-3 mb-4 cursor-help"
                                    >
                                        {{ alert.content }}
                                    </p>
                                </div>

                                <!-- 操作按钮 - 固定在右下角 -->
                                <div
                                    class="card-actions justify-end mt-auto pt-3"
                                >
                                    <div class="flex space-x-1">
                                        <button
                                            @click="completeEvent(alert.id)"
                                            class="btn btn-sm btn-circle btn-outline btn-success"
                                            title="标记为已完成"
                                        >
                                            <svg
                                                class="w-4 h-4"
                                                fill="none"
                                                stroke="currentColor"
                                                viewBox="0 0 24 24"
                                            >
                                                <path
                                                    stroke-linecap="round"
                                                    stroke-linejoin="round"
                                                    stroke-width="2"
                                                    d="M5 13l4 4L19 7"
                                                />
                                            </svg>
                                        </button>
                                        <button
                                            @click="editEvent(alert)"
                                            class="btn btn-sm btn-circle btn-outline btn-info"
                                            title="编辑事件"
                                        >
                                            <svg
                                                class="w-4 h-4"
                                                fill="none"
                                                stroke="currentColor"
                                                viewBox="0 0 24 24"
                                            >
                                                <path
                                                    stroke-linecap="round"
                                                    stroke-linejoin="round"
                                                    stroke-width="2"
                                                    d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
                                                />
                                            </svg>
                                        </button>
                                        <button
                                            @click="cancelEvent(alert.id)"
                                            class="btn btn-sm btn-circle btn-outline btn-error"
                                            title="取消事件"
                                        >
                                            <svg
                                                class="w-4 h-4"
                                                fill="none"
                                                stroke="currentColor"
                                                viewBox="0 0 24 24"
                                            >
                                                <path
                                                    stroke-linecap="round"
                                                    stroke-linejoin="round"
                                                    stroke-width="2"
                                                    d="M6 18L18 6M6 6l12 12"
                                                />
                                            </svg>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 已完成事件 -->
                <div v-if="completedEvents.length > 0">
                    <h2
                        class="text-xl font-semibold text-gray-700 mb-4 pb-2 border-b"
                    >
                        已完成事件
                    </h2>
                    <div
                        class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4"
                    >
                        <div
                            v-for="alert in completedEvents"
                            :key="alert.id"
                            class="card rounded-lg border transition-all duration-200 hover:shadow-md opacity-80 flex flex-col"
                            :class="getEventBackgroundClass(alert)"
                        >
                            <div class="card-body p-4 flex flex-col flex-1">
                                <!-- 标题和状态 -->
                                <div
                                    class="flex justify-between items-start mb-2"
                                >
                                    <h3
                                        class="card-title text-base font-medium text-gray-900 line-clamp-2 flex-1 mr-2"
                                    >
                                        {{ alert.title }}
                                    </h3>
                                    <span
                                        class="badge badge-sm shrink-0"
                                        :class="{
                                            'badge-success':
                                                alert.status === '1',
                                            'badge-warning':
                                                alert.status === '2',
                                        }"
                                    >
                                        {{ alert.statusText }}
                                    </span>
                                </div>

                                <!-- 类型和时间 -->
                                <div class="space-y-2 mb-3">
                                    <div
                                        class="flex items-center justify-between text-sm"
                                    >
                                        <span
                                            class="badge badge-outline badge-sm"
                                            :class="
                                                getEventTypeClass(
                                                    alert.type_id || 0,
                                                )
                                            "
                                        >
                                            {{ alert.topic }}
                                        </span>
                                    </div>
                                    <div class="text-xs text-gray-500">
                                        {{ alert.start_time }} -
                                        {{ alert.end_time }}
                                    </div>
                                </div>

                                <!-- 内容 - 添加悬停效果 -->
                                <div
                                    class="relative flex-1"
                                    @mouseenter="
                                        handleMouseEnter($event, alert)
                                    "
                                    @mousemove="handleMouseMove"
                                    @mouseleave="handleMouseLeave"
                                >
                                    <p
                                        class="text-sm text-gray-600 line-clamp-3 mb-4 cursor-help"
                                    >
                                        {{ alert.content }}
                                    </p>
                                </div>

                                <!-- 操作按钮 - 固定在右下角 -->
                                <div
                                    class="card-actions justify-end mt-auto pt-3"
                                >
                                    <div class="flex space-x-1">
                                        <!-- 撤销完成按钮 - 仅对已完成事件显示 -->
                                        <button
                                            v-if="alert.status === '1'"
                                            @click="undoCompleteEvent(alert.id)"
                                            class="btn btn-sm btn-circle btn-outline btn-warning"
                                            title="撤销完成"
                                        >
                                            <svg
                                                class="w-4 h-4"
                                                fill="none"
                                                stroke="currentColor"
                                                viewBox="0 0 24 24"
                                            >
                                                <path
                                                    stroke-linecap="round"
                                                    stroke-linejoin="round"
                                                    stroke-width="2"
                                                    d="M9 11l3-3m0 0l3 3m-3-3v8m0-13a9 9 0 110 18 9 9 0 010-18z"
                                                />
                                            </svg>
                                        </button>
                                        <!-- 恢复事件按钮 - 仅对已取消事件显示 -->
                                        <button
                                            v-if="alert.status === '2'"
                                            @click="restoreEvent(alert.id)"
                                            class="btn btn-sm btn-circle btn-outline btn-success"
                                            title="恢复事件"
                                        >
                                            <svg
                                                class="w-4 h-4"
                                                fill="none"
                                                stroke="currentColor"
                                                viewBox="0 0 24 24"
                                            >
                                                <path
                                                    stroke-linecap="round"
                                                    stroke-linejoin="round"
                                                    stroke-width="2"
                                                    d="M14.5 8.046H11V6.119c0-.921-.9-1.446-1.524-.894l-5.108 4.49a1.2 1.2 0 0 0 0 1.739l5.108 4.49c.624.556 1.524.027 1.524-.893v-1.928h2a3.023 3.023 0 0 1 3 3.046V19a5.593 5.593 0 0 0-1.5-10.954Z"
                                                />
                                            </svg>
                                        </button>
                                        <button
                                            @click="editEvent(alert)"
                                            class="btn btn-sm btn-circle btn-outline btn-info"
                                            title="编辑事件"
                                        >
                                            <svg
                                                class="w-4 h-4"
                                                fill="none"
                                                stroke="currentColor"
                                                viewBox="0 0 24 24"
                                            >
                                                <path
                                                    stroke-linecap="round"
                                                    stroke-linejoin="round"
                                                    stroke-width="2"
                                                    d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
                                                />
                                            </svg>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 空状态 -->
                <div v-if="alertData.length === 0" class="text-center py-16">
                    <div class="text-gray-400 mb-4">
                        <svg
                            class="w-16 h-16 mx-auto"
                            fill="none"
                            stroke="currentColor"
                            viewBox="0 0 24 24"
                        >
                            <path
                                stroke-linecap="round"
                                stroke-linejoin="round"
                                stroke-width="1"
                                d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
                            />
                        </svg>
                    </div>
                    <div class="text-gray-500 text-lg mb-2">
                        {{ displayDateString }}没有事件
                    </div>
                    <div class="text-gray-400 text-sm">享受轻松的一天！</div>
                </div>
            </div>
        </div>

        <!-- 悬停提示框 -->
        <div
            v-if="hoveredEvent"
            class="fixed z-50 max-w-sm bg-gray-900 text-white text-sm rounded-lg p-3 shadow-xl pointer-events-none"
            :style="{
                left: tooltipPosition.x + 'px',
                top: tooltipPosition.y + 'px',
            }"
        >
            <div class="font-semibold mb-2">{{ hoveredEvent.title }}</div>
            <div class="whitespace-pre-wrap">{{ hoveredEvent.content }}</div>
        </div>

        <!-- 编辑模态框 -->
        <div
            v-if="showEditModal"
            class="fixed inset-0 bg-gray-300/50 bg-opacity-50 flex items-center justify-center z-50 p-4"
            @click.self="closeModal"
        >
            <div
                class="bg-white rounded-lg shadow-xl w-full max-w-2xl max-h-[90vh] overflow-hidden"
            >
                <div class="p-6">
                    <h2 class="text-xl font-bold text-gray-800 mb-4">
                        编辑事件
                    </h2>

                    <div class="space-y-4" v-if="editingEvent">
                        <!-- 标题 -->
                        <div>
                            <label
                                class="block text-sm font-medium text-gray-700 mb-1"
                            >
                                标题
                            </label>
                            <input
                                type="text"
                                v-model="editingEvent.title"
                                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                            />
                        </div>

                        <!-- 内容 -->
                        <div>
                            <label
                                class="block text-sm font-medium text-gray-700 mb-1"
                            >
                                内容
                            </label>
                            <textarea
                                v-model="editingEvent.content"
                                rows="4"
                                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                            ></textarea>
                        </div>

                        <!-- 类型 -->
                        <div>
                            <label
                                class="block text-sm font-medium text-gray-700 mb-1"
                            >
                                类型
                            </label>
                            <select
                                v-model="editingEvent.type_id"
                                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                            >
                                <option :value="0">其他</option>
                                <option :value="1">材料</option>
                                <option :value="2">订单</option>
                                <option :value="3">个人事情</option>
                            </select>
                        </div>

                        <!-- 状态 -->
                        <div>
                            <label
                                class="block text-sm font-medium text-gray-700 mb-1"
                            >
                                状态
                            </label>
                            <select
                                v-model="editingEvent.status"
                                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                            >
                                <option value="0">未完成</option>
                                <option value="1">已完成</option>
                                <option value="2">已取消</option>
                                <option value="3">过期</option>
                            </select>
                        </div>

                        <!-- 时间 -->
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label
                                    class="block text-sm font-medium text-gray-700 mb-1"
                                >
                                    开始时间
                                </label>
                                <input
                                    type="datetime-local"
                                    v-model="editingEvent.start_time"
                                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                                />
                            </div>
                            <div>
                                <label
                                    class="block text-sm font-medium text-gray-700 mb-1"
                                >
                                    结束时间
                                </label>
                                <input
                                    type="datetime-local"
                                    v-model="editingEvent.end_time"
                                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                                />
                            </div>
                        </div>
                    </div>
                </div>

                <div class="bg-gray-50 px-6 py-4 flex justify-end space-x-3">
                    <button
                        @click="closeModal"
                        class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500"
                    >
                        取消
                    </button>
                    <button
                        @click="saveEvent"
                        class="px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500"
                    >
                        保存
                    </button>
                </div>
            </div>
        </div>
    </main>
</template>

<style scoped>
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card {
    transition: all 0.2s ease-in-out;
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* 确保卡片有统一的最小高度 */
.card-body {
    min-height: 200px;
}
</style>
